<template>
  <div class="subjectStoreroom">
  	<div class="logo"><img src="../../assets/test_logo.png" alt=""> 题库</div>
  	<el-row type="flex" class="row-bg" justify="space-around">
  		<el-col  :sm="20" :md="18" :lg="18"  :xs="22">
  			<div class="grid-content bg-purple-light subject-list">
		  		<div class="subject-title"><img src="../../assets/test_icon.png"/>考试列表</div>
		  		<div class="subject-content">
		  			<el-table
				      :data="tableData"
				      style="width: 100%" :show-header="false">
				      <el-table-column
				        prop="testName"
				        label="试卷"
				        style="width: 100%" align="left">
				        <template slot-scope="scope">
					        <span @click="handleEdit(scope.row)" :class="scope.row.rowClass">{{ scope.row.testPaperName}}</span>
					        	<div class="hint" v-if="startTime1<scope.row.examStartTime">距离考试开始：
						        	<countDown  :endTime="scope.row.examStartTime" :callback="callback2" endText="考试开始了">
						        	</countDown>
					        	</div>
					        	<div class="hint" v-if="scope.row.examStartTime<=startTime1&&startTime1<scope.row.examEndTime">（正在进行）：
					        		<countDown :endTime="scope.row.examEndTime" :callback="callback1" endText="考试结束了">
						        	</countDown>
					        	</div>
					      </template>
				      </el-table-column>
				      <el-table-column
				        label="进入"
				        style="width: 100%" align="right">
				        <template slot-scope="scope">
					        <el-button
					          type="text"
					          @click="handleEdit(scope.row)">进入考试</el-button>
					      </template>
				      </el-table-column>
				    </el-table>
		  		</div>
  			</div>
  		</el-col>
  	</el-row>
  </div>
</template>

<script>
import mydata from '@/components/myData.vue'
export default {
  name: 'subjectStoreroom',
  data () {
    return {
    	myId:'',
      tableData: [],
      //开始时间
      startTime:Date.parse(new Date())+'',
      startTime1:'',
    }
  },
  components:{
  	countDown:mydata
  },
  created:function(){
  	this.startTime1=parseInt(this.startTime.substr(0,10))
  	this.myId=localStorage.getItem("id");
  	var that=this;
  	this.axios({
  		method:'post',
  		url:that.$store.state.globalTestApi+"/admin/ExaminationRoom/examineeERoomList",
  		data:{
  			id:that.myId
  		}
  	}).then(function(res){
  		if(res.data.msg=="操作成功"){
  			that.tableData=res.data.data.list
  		}else{
  			 that.$message('未获取到试卷列表');
  		}
  	})
  },
  methods:{
  	//点击进入
  	handleEdit(data1){
  		var time=Date.parse(new Date())+'';
  		var nowTime=time.substr(0,10);
			if(parseInt(nowTime)<parseInt(data1.examStartTime)){
				this.$message.warning('本场考试未开始');
			}else{
				if(parseInt(nowTime)>parseInt(data1.examEndTime)){
					this.$message.warning('考试已经结束，请刷新页面重新获取考试列表');
				}else{
					if(data1.academicRecordsId==null){
						this.$confirm('确定进入考场？')
				      .then(_ => {
				        this.$router.push({
				        	name:"testList",
				        	query:{testId:data1.testPaperId,
				        		examEndTime:data1.examEndTime,
				        		isPigeonhole:data1.isPigeonhole,
				        		testPersonnelId:data1.testPersonnelId
				        	}
				        })
				      })
				      .catch(_ => {});
					}else{
						this.$confirm('你已经参加过本场考试了，可在考试结束后进入【我的】查看成绩')
				      .then(_ => {
				      })
				      .catch(_ => {});
					}
				}
			}
  	},
  	callback1(){
  	},
  	callback2(){
  	}
  }
}
</script>

<style>
.subjectStoreroom .logo{padding-top: 80px;font-size: 32.59px;color: #fff;margin-bottom: 30px}
.subjectStoreroom .logo img{vertical-align: middle;width: 69px;height: 60px;}
.subjectStoreroom .subject-list{padding:80px 10% 50px 10%;background-color: #fff;box-shadow: 0px 0px 3px rgba(0,0,0,0.3);box-sizing: border-box;margin-bottom: 116px;}
.subjectStoreroom .subject-title{font-size: 20px;color:#000;letter-spacing: 3px;text-align: left;margin-bottom:10px ;}
.subjectStoreroom .subject-title img{width: 52px;height: 60px;margin-right: 5px;vertical-align: text-bottom;}
.subjectStoreroom .subject-content div span{font-size: 18px;color: #898989;cursor: pointer;}
.subjectStoreroom .subject-content .el-table__row:hover span{color: #1997bc;}
.subjectStoreroom .subject-content td{padding: 6px 0;}
/*开始时间*/
.subjectStoreroom .subject-content div .hint,.subjectStoreroom .subject-content div .hint i{font-size: 14px;color: rgba(0,0,0,0.3);font-style: normal;}
@media screen and (max-width: 768px) {
	.subjectStoreroom .logo{font-size: 20px;padding-top:50px;}
	.subjectStoreroom .logo img{width: 39px;height: 33px;}
	.subjectStoreroom .subject-title{font-size: 15px;}
	.subjectStoreroom .subject-title img{width: 22px;height: 30px;}
	.subjectStoreroom .subject-list{padding: 50px 10% 30px 10%;}
	.subjectStoreroom .subject-content div span{font-size: 14px;}
	.subjectStoreroom .subject-content td{padding: 3px 0;}
	.subjectStoreroom .subject-content div .hint,
	.subjectStoreroom .subject-content div .hint i{font-size: 10px;}
	.subjectStoreroom .subject-content div .hint i{display: block;}
}
</style>
